<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>v-for支持的其他类型(对象,字符串,数字)</title>  
</head>  
<body>  
  <div id="app">  
    <!--v-for支持所有的可迭代对象iterable-->
    <!--1. 遍历数组-->
    <!--2. 遍历对象-->
    <span>--------------------默认是value----------------------</span>
    <ul>
      <li v-for="item in info">{{item}}</li> <!--默认是value-->
    </ul>
    <span>--------------------value, key, index----------------------</span>
    <ul>
      <li v-for="(value, key, index) in info">{{value}} --- {{key}} --- {{index}}</li> <!--可以省略()-->
    </ul>
    <span>--------------------遍历字符串,字符串也是可迭代对象----------------------</span>
    <!--3. 遍历字符串,字符串也是可迭代对象-->
    <ul>
      <li v-for="item in message">{{item}}</li>
    </ul>
    <span>--------------------遍历数字----------------------</span>
    <!--4. 遍历数字-->
    <ul>
      <li v-for="item in 10">{{item}}</li>
    </ul>
  </div>  

  <script src="../lib/vue.js"></script>  
  <script>  
    // 使用vue  
    const app = Vue.createApp({  
      data: function () {  
        return {  
          movies: []  
          , info: {name: "why", age: 18, height: 1.88}
          , message: "Hellow vue"
        };  
      },  
      methods: {  
      }  
    });  

    // 挂载   
    app.mount("#app");  
  </script>  

</body>  
</html>  